@import './base.scss';
@import '../iconfont/aliicon.scss';

html {
	font-size: 16px;
}
div,
html,
body {
	box-sizing: border-box;
}

body {
	margin: 0;
	line-height: 1.2em;
	background-color: map_get($colors, 'backgroundcolor');
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: -apple-system, BlinkMacSystemFont, opensans, Optima,
		Microsoft Yahei, sans-serif;
	color: map_get($colors, 'primary');
}
img {
	height: auto;
	max-width: 100%;
}
/*修改滚动条样式*/
body::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
body::-webkit-scrollbar-thumb {
	background: map_get($colors, 'active');
	border-radius: 6px;
}

a {
	color: map_get($colors, 'lightgrey');
	text-decoration: none;
}

a:hover {
	color: map_get($colors, 'active');
}

input{  
	background:none;  
	outline:none;  
	border:none;
}
input:focus{   
	border:none;
}


p {
	line-height: 1.5em;
}

.flex-1 {
	flex: 1;
}

.flex-grow-1 {
	flex-grow: 1;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

// flex
.d-flex {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

// width height
.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

//超出一行隐藏
.text-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
//超出两行隐藏
.text-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

// 解决鼠标选中颜色
*::selection {
	background: map_get($colors, 'active');
	color: #fff;
}

*::-moz-selection {
	background: map_get($colors, 'active');
	color: #fff;
}

*::-webkit-selection {
	background: map_get($colors, 'active');
	color: #fff;
}

// 装饰物
.decorate:before {
	display: inline-block;
	content: '#';
	color: #ff6d6d;
	font-weight: bold;
	margin-right: 6px;
	font-size: 1.375rem;
}
@media  (max-width: 300px )  {
	// 内容区域
	.content {
		width: 100%;
		margin: 3.75rem auto 0;
		padding: 1rem ;
    animation: upwardtransition 3s;
    box-sizing: border-box;
  }
  
  .labels{
    display: none;
  }
  .headercontent{
    display: none
  }
}
@media  (min-width: 300px ) and (max-width: 768px ) {
	// 内容区域
	.content {
		width: 100%;
		margin: 3.75rem auto 0;
		padding: 1rem ;
    animation: upwardtransition 3s;
    box-sizing: border-box;
  }
  
  .labels{
    display: none;
  }
  .headercontent{
    display: none
  }
}
@media (min-width: 768px)and (max-width: 992px )  {
	// 内容区域
	.content {
		width: 100%;
		margin: 3.75rem auto 0;
		padding: 1rem ;
    animation: upwardtransition 3s;
  }
  
  .labels{
    display: none;
  }
  .headercontent{
    display: none
  }
}
@media (min-width: 992px)and (max-width: 1200px ) {
	// 内容区域
	.content {
		width: 100%;
		margin: 3.75rem auto 0;
		padding: 1rem ;
    animation: upwardtransition 3s;
    box-sizing: border-box;
  }
  .labels{
    display: block;
  }
  .headercontent{
    display: block;
  }
}
@media (min-width: 1200px) and (max-width: 1600px ){
	// 内容区域
	.content {
		width: 100%;
		margin: 5rem auto 0;
		padding: 3rem 8rem;
    animation: upwardtransition 3s;
    box-sizing: border-box;
  }
  .labels{
    display: block;
  }
  .headercontent{
    display: block;
  }
}
@media (min-width: 1600px){
	// 内容区域
	.content {
		width: 100%;
		margin: 5rem auto 0;
		padding: 3rem 8rem;
    animation: upwardtransition 3s;
    box-sizing: border-box;
  }
  .labels{
    display: block;
  }
  .headercontent{
    display: block;
  }
}

// 定义淡入动画
@keyframes fadeintransition {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

// 定义个出场过渡动画向上
@keyframes upwardtransition {
	from {
		transform: translateY(6.25rem);
		opacity: 0.2;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

// 定义个出场过渡动画向左
@keyframes towardslefttransition {
	from {
		transform: translateX(18.75rem) skew(-20deg);
		opacity: 0.2;
	}
	to {
		transform: translateX(0) skew(0deg);
		opacity: 1;
	}
}
